import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtGraphicalEffects 1.0

Item{
    id: musicView
    property string url:"http://www.music.test/api/song"
    signal selected()
    state:"open"
    states:[
        State{
            name:"open"
            PropertyChanges { target: musicView; opacity:1}
            PropertyChanges {target: musicView;visible:true}
        },
        State{
            name:"close"
            PropertyChanges{target:musicView;opacity:0}
            PropertyChanges {target: musicView;visible:false}
        }
    ]
    transitions: [
        Transition {
            from: "open";to: "close"
            SequentialAnimation{
                NumberAnimation {
                    target: musicView
                    property: "opacity"
                    duration: 200
                    to:0
                    easing.type: Easing.InOutQuad
                }
                PropertyAnimation{
                    target:musicView
                    property: "visible"
                    to:false
                }
            }
        },
        Transition {
            from: "close";to: "open"
            SequentialAnimation{
                PropertyAnimation{
                    target:musicView
                    property: "visible"
                    to:true
                }
                NumberAnimation {
                    target: musicView
                    property: "opacity"
                    to:1
                    easing.type: Easing.InOutQuad
                }
            }
        }
    ]
    ListView {
        id: musicList
        width: musicView.width
        height: musicView.height
        model: myModel
        delegate: contactDelegate

        highlight: Rectangle {
            color: "lightsteelblue"
        }

        Component {
            id: contactDelegate
            Item {
                width: musicList.width
                height: 40
                Row {
                    Label {
                        width: musicList.width * 0.1
                        height: 40
                        text: index + 1
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                    }
                    Column {
                        id: titleContant
                        width: musicList.width * 0.8
                        Text {
                            width: titleContant.width
                            height: 20
                            text: title
                            color: "#111114"
                            font.family: "Mukti Narrow"
                            font.bold: true
                            verticalAlignment: Text.AlignLeft

                            MouseArea {
                                anchors.fill: parent

                                onClicked: {
                                    if (musicList.currentIndex != index) {
                                        musicList.currentIndex = index
                                        myModel.jump(index)
                                    }
                                    musicView.selected()
                                }
                            }
                        }
                        Text {
                            width: titleContant.width
                            height: 19
                            text: artist + '-' + album
                            color: "#111114"
                            font.family: "宋体"
                            font.bold: true
                            font.pointSize: 8
                            verticalAlignment: Text.AlignLeft
                        }
                        Rectangle {
                            color: "#96979c"
                            width: titleContant.width
                            height: 1
                        }
                    }

                    Text {
                        width: musicList.width * 0.1
                        height: 40
                        text: '...'
                        color: "#96979c"
                        font.family: "Mukti Narrow"
                        font.bold: true
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                }
            }
        }
        Connections {
            target: myModel
            onPlayListChanged: {
                if (musicList.currentIndex != row) {
                    musicList.currentIndex = row
                }
                player.play()
            }
        }
    }
    Component.onCompleted: {
        myModel.setPlayListFromHttp(url);
    }
}
